<template>
  <div>
    <div>
      <el-button class="new-btn" type="primary">+新建文章</el-button>
    </div>
    <!-- 搜索操作栏 -->
    <div class="top-operate-default mar-t-20">
      <div class="search-item">
        <label>搜索文章：</label>
        <el-input style="width: 294px;" v-model="searchKeyword" placeholder="请输入搜索内容"></el-input>
        <label class="mar-l-20">分类：</label>
        <el-cascader
          v-model="seachCategoryType"
          class="default-input"
          :options="options"
          :props="{ checkStrictly: true }"
          clearable></el-cascader>
        <label class="mar-l-20">创建时间：</label>
        <el-date-picker v-model="startEndTime"
          type="datetimerange"
          unlink-panels
          :picker-options="pickerOptions"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          start-placeholder="开始时间"
          end-placeholder="结束时间">
        </el-date-picker>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button plain="" @click="resetSearch">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 表格内容 -->
    <div class="table-container mar-t-20">
      <el-table ref="multipleTable" 
        :data="datalist" 
        v-loading="listLoading" 
        element-loading-text="加载中" 
        style="width: 100%" 
        header-cell-class-name="default-header"
        row-class-name="default-row">
        <el-table-column min-width="400px" label="文章标题">
          <template slot-scope="scope">
            <div class="cursor-p" style="color:#155bd4;" @click="$router.push({path: '/system/help-settings/details/index'})">
              {{scope.row.contentTitle}}
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="400px" label="分类">
          <template slot-scope="scope">
            <div>
              {{scope.row.category}}
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="400px" label="创建时间">
          <template slot-scope="scope">
            <div>
              {{scope.row.createdTime}}
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="400px" label="操作" align="right">
          <template slot-scope="scope">
            <div>
              <el-button type="text">编辑</el-button>
              <!-- <el-button type="text">删除</el-button> -->
              <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='取消'
                title="您确定删除吗？"
                @onConfirm="confirmDelContent(scope.row.contentId)"
              >
                <el-button type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchKeyword: '',
      seachCategoryType: '',
      startEndTime: [],
      datalist: [],
      options: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      listLoading: false
    }
  },
  mounted() {
    this.datalist = [{
      contentId: '10000',
      contentTitle: '文章标题1',
      category: '商品',
      createdTime: '2020-08-17 22:48:51'
    }, {
      contentId: '10001',
      contentTitle: '文章标题2',
      category: '商品-零售商品',
      createdTime: '2020-08-17 22:48:51'
    }, {
      contentId: '10002',
      contentTitle: '文章标题3',
      category: '商品-零售商品-普通商品',
      createdTime: '2020-08-17 22:48:51'
    }]
  },
  methods: {
    // 查询事件
    handleSearch() {
    },
    // 重置搜索条件
    resetSearch() {},
    // 确认删除该条文章
    confirmDelContent(val) {
      console.log('文章ID', val)
    }
  }
}
</script>
<style lang="less" scoped>
.new-btn{
  padding: 0;
  height: 38px;
  line-height: 38px;
  width: 98px;
  text-align: center;
}
.default-input{
  /deep/.el-input{
    width: 180px !important;
  }
}
</style>
